<template>
  <el-cascader
    v-select-scroll
    v-model="valueClone"
    v-bind="$attrs"
    filterable
    size="small"
    @change="onChange"
  >
    <template slot-scope="{ data }">
      <el-tooltip v-if="data.name.length > 14" placement="top-start" effect="dark">
        <div slot="content" style="max-width: 150px;">{{ data.name }}</div>
        <span class="inline-tag ellipsisOne">{{ data.name }}</span>
      </el-tooltip>
      <span v-else>{{ data.name }}</span>
    </template>
  </el-cascader>
</template>

<script>
export default {
  name: 'FbCascader',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    valueClone: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('change', val);
      }
    }
  },
  methods: {
    onChange(data) {
      this.$emit('change', data);
    }
  }
};
</script>

<style scoped lang="scss">

</style>
